<template>
  <div id="holiday">
    <Breadcrumb content="节假日管理" />
    <div class="bodyContent">
      <Splitpanes class="area">
        <Pane size="60">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findHolidayList" @search-click="findHolidayList"></vxe-input>
              <!-- <el-date-picker style="width: 180px" v-model="searchForm.year" type="year" clearable class="vxeInputSearch" placeholder="查询年份" @clear="findHolidayList" :value-format="yyyy" :format="yyyy"></el-date-picker> -->
              <vxe-input v-model="searchForm.year" placeholder="年选择" @change="findHolidayList" value-format="yyyy" type="year" transfer clearable></vxe-input>
              <vxe-button type="text" icon="vxe-icon-refresh" class="button-blue" content="刷新" @click="findHolidayList"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="add()"></vxe-button>
              <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="handleDelete"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="holidayBox">
            <vxe-table ref="holidayTableRef" :loading="showLoading" class="mytable-scrollbar" border align="left" height="auto" :keep-source="true" :data="holidayList" :row-config="{ isCurrent: true, isHover: true }" @current-change="currentChangeEvent" resizable show-overflow>
              <vxe-column type="checkbox" align="center" width="26"></vxe-column>
              <vxe-column type="seq" title="序号" align="center" width="30"></vxe-column>
              <vxe-column field="holidayCode" title="编码"></vxe-column>
              <vxe-column field="holidayName" title="节假日名称"></vxe-column>
              <vxe-column field="holiday" title="日期" :formatter="formatterSex"></vxe-column>
              <vxe-column field="holidayLevel" title="级别"> </vxe-column>
              <vxe-column field="isRepair" title="是否补班">
                <template #default="{ row }">
                  <el-tag :type="getStatusTagType(row)">{{ getStatusDesc(row) }}</el-tag>
                </template>
              </vxe-column>
              <vxe-column field="remake" title="备注"></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="40">
          <el-tabs type="border-card">
            <el-tab-pane label="基本信息"
              ><el-form ref="holidayFormRef" :model="holidayForm" :rules="baseFormRules" label-width="100px" class="form-input-m baseForm" v-loading="showLoading" inline-message>
                <el-scrollbar style="height: 100%">
                  <el-form-item label="编码" prop="holidayCode">
                    <el-input v-model="holidayForm.holidayCode" placeholder="编码" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="节假日名称" prop="holidayName"> <el-input v-model="holidayForm.holidayName" placeholder="节假日名称" clearable></el-input> </el-form-item>
                  <el-form-item label="日期" prop="holiday"> <el-date-picker v-model="holidayForm.holiday" type="date" placeholder="日期" clearable /> </el-form-item>
                  <el-form-item label="级别" prop="holidayLevel"> <el-input v-model="holidayForm.holidayLevel" placeholder="级别" clearable></el-input> </el-form-item>
                  <el-form-item label="是否补班" prop="isRepair">
                    <el-switch v-model="holidayForm.isRepair" inline-prompt active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
                  </el-form-item>
                  <el-form-item prop="seq" label="顺序">
                    <el-input-number v-model="holidayForm.seq" :min="1" :max="1000" />
                  </el-form-item>
                  <el-form-item label="备注" prop="remake">
                    <el-input v-model="holidayForm.remake" type="textarea" placeholder="备注" clearable style="margin-right: 10px"></el-input>
                  </el-form-item>
                  <el-form-item class="form-footer">
                    <template #default>
                      <el-button type="primary" v-loading="saveLoading" @click="save()">保存</el-button>
                      <el-button type="default" @click="add()">重置</el-button>
                    </template>
                  </el-form-item>
                </el-scrollbar>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息

let { proxy }: any = getCurrentInstance();
const holidayList = reactive([]);
const holidayForm = reactive({
  id: '',
  holidayCode: '',
  holidayName: '',
  holiday: '',
  holidayLevel: '',
  isRepair: 0,
  seq: 1,
  remake: ''
});
let searchForm = reactive({
  searchValue: '',
  year: null
});

let saveLoading = ref(false); //保存

// 方法定义区 =============================================================
onMounted(() => {
  findHolidayList();
});

// 获取列表信息
function findHolidayList() {
  holidayList.length = 0;
  const url = '/wk/holiday/getHolidayList';
  proxy.$http
    .get(url, { params: { keyWord: searchForm.searchValue, year: searchForm.year ? searchForm.year : '' } })
    .then((res: any) => {
      if (res.data && res.data.length > 0) {
        holidayList.push(...res.data);
        currentChangeEvent({ row: holidayList[0] });
        const $xTable = proxy.$refs.holidayTableRef as any;
        if ($xTable) {
          $xTable.setCurrentRow(holidayList[0]);
        }
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}
// 行点击事件
function currentChangeEvent(row: any) {
  Object.assign(holidayForm, row.row);
}

// 添加
function add() {
  Object.keys(holidayForm).forEach((key) => {
    switch (typeof holidayForm[key]) {
      case 'string':
        holidayForm[key] = '';
        break;
      case 'number':
        holidayForm[key] = 0;
        break;
    }
    if (key === 'seq') {
      holidayForm[key] = holidayList.length + 1;
    }
  });
}
// 保存
function save() {
  let url = '';
  if (holidayForm.id == '' || holidayForm.id == null || holidayForm.id == undefined) {
    url = '/wk/holiday/addHoliday';
  } else {
    url = '/wk/holiday/updateHoliday';
  }
  const el: any = proxy.$refs.holidayFormRef;
  if (!el) return;
  el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    proxy.$http
      .post(url, holidayForm)
      .then((res: any) => {
        VxeMessage(res.status.msg, VxeNotifyType.success);
        findHolidayList();
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  });
}

// 删除
function handleDelete() {
  const $xTable = proxy.$refs.holidayTableRef as any;
  const selectRows = $xTable.getCheckboxRecords();
  if (selectRows.length <= 0) {
    VxeMessage('请先选中要删除的项', VxeNotifyType.warning);
    return;
  }
  proxy
    .$confirm('确定删除此项？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then((type) => {
      if (type === 'confirm') {
        let ids = selectRows.map((item) => item.id);
        const url = '/wk/holiday/deleteHolidayByIds';
        proxy.$http
          .post(url, ids)
          .then((res: any) => {
            if (res.status.code === 1) {
              VxeMessage('删除成功', VxeNotifyType.success);
              findHolidayList();
            } else {
              VxeMessage('删除失败', VxeNotifyType.error);
            }
          })
          .catch((err) => {
            VxeMessage(err.response.data.status.msg, VxeNotifyType.error);
          });
      }
    });
}
// 获取是否静态的tag标记(绿/红)
function getStatusTagType(row: any) {
  if (row.isRepair === 1) {
    return 'success';
  } else {
    return 'danger';
  }
}

// 获取是否静态文字(是/否)
function getStatusDesc(row: any) {
  if (row.isRepair === 1) {
    return '是';
  } else {
    return '否';
  }
}
</script>

<style lang="scss" scoped>
#holiday {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .holidayBox {
        height: calc(100% - 40px);
      }
      .el-tabs {
        height: 100%;
        :deep(.el-tabs__content) {
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
